<template>
  <div class="songFooter">
    <div style="flex-basis: 200px">
      <footer-info :currentTime="currentSongTime"></footer-info>
    </div>
    <div class="playItem">
      <i class="iconfont iconshangyishou"></i>
      <i class="iconfont iconbofang1" v-if="songConfig.isplay" @click="play()"></i>
      <i class="iconfont iconzanting" v-if="!songConfig.isplay" @click="paused()"></i>
      <i class="iconfont iconxiayishou"></i>
    </div>
    <div>
      <play-item></play-item>
    </div>
  </div>
  <div>
    <audio :src="songConfig.playSrc" ref="playMachine"></audio>
  </div>
</template>

<script lang="ts" setup>
import footerInfo from "./footerInfo.vue";
import playItem from "./playItem.vue";
import { computed, ref, onMounted } from "vue";
import { useUserStore } from "@/store";
const store = useUserStore();
const songConfig = computed(() => {
  return store.playInfo;
});
onMounted(() => {
  store.changePlayInfo({ ...songConfig.value, isplay: true });
});
const time = ref<number | null>(null);
const playMachine = ref<null | HTMLAudioElement>(null);
const currentSongTime = ref<number>(0);
const play = () => {
  store.changePlayInfo({ ...songConfig.value, isplay: false });
  time.value = setInterval(() => {
    currentSongTime.value = playMachine.value?.currentTime || 0;
  }, 500);
  playMachine.value?.play();
};
const paused = () => {
  if (time.value) {
    clearInterval(time.value);
  }
  store.changePlayInfo({ ...songConfig.value, isplay: true });
  playMachine.value?.pause();
};
</script>

<style lang="scss" scoped>
.songFooter {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100%;
  height: 60px;
  background-color: #252525;
  position: absolute;
  bottom: 0;
  color: #bebebe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999999;
  .playItem {
    color: #c3473a;
    display: flex;
    align-items: center;
    i {
      line-height: 40px;
      font-size: 20px;
      margin: 0 16px;
      &:nth-child(2) {
        font-size: 40px;
      }
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
